<template>
	<view class="LNCus">
		<view class="CusTop">
			<Top :fa-msg="msg"></Top>
			<view class="CusShai">
				<p :class="act==1?'active':'pppLN'" @click="gai()">排序</p>
				<p :class="act==2?'active':'sssLN'" @click="gaier()">筛选</p>
			</view>
		</view>
		<view class="LNCon">
			<ul class="ULCon" v-show="zhu">
				<li class="LICon" v-for="item in (newArr?newArr:arr)" :key="item.id">
					<view class="LNleft">
						<h2 class="zuoTitle">{{item.gongsi}}</h2>
						<p class="last">最后跟进：{{item.laseTime}}</p>
						<p class="star">客户星级：{{item.star}}</p>
						<view class="disan">
							<p>跟进</p>
							<p>任务</p>
							<p>电话</p>
						</view>
					</view>
					<view class="LNRight">
						<view class="rightON">
							<view class="yuan"></view>
							<p class="zheng">正在跟进</p>
						</view>
						<img src="../../static/Ln/t3.png" alt="" class="tou" @click="go(item)"/>
						<p class="userName">{{item.userName}}</p>
						<p class="geng">更多</p>
					</view>
				</li>
			</ul>
			<view class="paiPage" v-show="pai">
				<p class="pai">排序方式</p>
				<ul class="uPai">
					<li :class="xvs===true?'ac':'liPai'" @click="yesxv()">正序排序</li>
					<li :class="xvs===false?'ac':'liPai'" @click="noxv()">倒序排序</li>
				</ul>
				<p class="pai">排序属性</p>
				<ul class="uPai">
					<li :class="index===paiINdex?'ac':'liPai'" v-for="(item,index) in ke" :key="item" @click="result(index)">{{item}}</li>
				</ul>
				<view class="LNbottom">
					<view class="chong" @click="pais()">重置</view>
					<view class="que" @click="queding()">确定</view>
				</view>
				<p class="pais"></p>
			</view>
			<view class="shaiPage" v-show="shai">
				<p class="keFen">客户分类</p>
				<ul class="onFen">
					<li v-for="(item,index) in fen" :key="item.id" :class="index===fenIndex?'onActive':'onLI'" @click="onGai(index,item.name,item.on,item.ns)">{{item.name}}</li>
				</ul>
				<p class="keFen">客户类型</p>
				<ul class="onFen">
					<li v-for="(item,index) in lei" :key="item.id" :class="index===leiIndex?'onActive':'onLI'" @click="leiGai(index,item.name)">{{item.name}}</li>
				</ul>
				<p class="keFen">客户状态</p>
				<ul class="onFen">
					<li v-for="(item,index) in type" :key="item.id" :class="index===typeIndex?'onActive':'onLI'" @click="typeGai(index,item.name)">{{item.name}}</li>
				</ul>
				<p class="keFen">客户星级</p>
				<ul class="onFen">
					<li v-for="(item,index) in star" :key="item.id" :class="index===starIndex?'onActive':'onLI'" @click="starGai(index,item.name)">{{item.name}}</li>
				</ul>
				<p class="keFen">所属行业</p>
				<ul class="onFen">
					<li v-for="(item,index) in hang" :key="item.id" :class="index===hangIndex?'onActive':'onLI'" @click="hangGai(index,item.name)">{{item.name}}</li>
				</ul>
				<view class="LNbottom">
					<view class="chong" @click="chongs()">重置</view>
					<view class="que" @click="suo()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Top from "../components/Top/Top.vue"
	export default { 
		data() {
			return {
				msg:"客户管理",
				act:0,
				arr:[],
				pai:false,
				ke:["客户名称","客户类型","客户状态","所属行业","客户来源","客户星级","保护到期时间","成交总次数","成交总金额","成交产品数量","最后成交时间",
				"费用总次数","费用总金额","开票总次数","开票总金额","回款总次数","回款总金额","回款计划延期次数","退款总额","退款总次数","跟进次数","未跟进天数",
				"下次跟进时间","最后跟进时间","联系次数","未联系天数","最后联系时间","创建时间","转交时间","获得时间","更新时间"
				],
				par:false,
				paiINdex:0,
				xvs:true,
				zhu:true,
				shai:false,
				fen:[
					{
						id:0,
						name:"全部分类",
						on:"leiAll",
						ns:"全部类型"
					},
					{
						id:1,
						name:"我的客户",
						on:"khfl",
						ns:"我的客户"
					},
					{
						id:2,
						name:"下属客户",
						on:"khfl",
						ns:"下属客户"
					},
					{
						id:3,
						name:"重点客户",
					
						on:"khfl",
						ns:"重点客户"
					},
					{
						id:4,
						name:"我协作的",
				
						on:"khfl",
						ns:"我协作的"
					},
					{
						id:5,
						name:"下属协作的",
					
						on:"khfl",
						ns:"下属协作的"
					},
					{
						id:6,
						name:"今日新增",
			
						on:"khfl",
						ns:"今日新增"
					},
					{
						id:7,
						name:"公海客户",
					
						on:"khfl",
						ns:"公海客户"
					},
					{
						id:8,
						name:"垃圾客户",
						
						on:"khfl",
						ns:"垃圾客户"
					}
				],
				fenIndex:0,
				lei:[
					{
						id:0,
						name:"全部类型",
						in:"leiAll"
					},
					{
						id:1,
						name:"企业客户",
						in:"lei"
					},
					{
						id:2,
						name:"个人客户",
						in:"lei"
					}
				],
				leiIndex:null,
				type:[
					{
						id:0,
						name:"了解产品",
						in:"types"
					},		{
						id:1,
						name:"正在跟进",
						in:"types"
					},		{
						id:2,
						name:"正在试用",
						in:"types"
					},		{
						id:3,
						name:"准备购买",
						in:"types"
					},		{
						id:4,
						name:"准备付款",
						in:"types"
					},		{
						id:5,
						name:"已经购买",
						in:"types"
					},		{
						id:6,
						name:"暂时搁置",
						in:"types"
					},
				],
				typeIndex:null,
				star:[
					{
						id:0,
						name:"1星客户",
						in:"types"
					},	{
						id:1,
						name:"2星客户",
						in:"types"
					},	{
						id:2,
						name:"3星客户",
						in:"types"
					},	{
						id:3,
						name:"4星客户",
						in:"types"
					},	{
						id:4,
						name:"5星客户",
						in:"types"
					}
				],
				starIndex:null,
				hang:[
					{
						id:0,
						name:"家用电器",
						in:"hang"
					},
					{
						id:1,
						name:"交通运输",
						in:"hang"
					},
					{
						id:2,
						name:"商务服务",
						in:"hang"
					},
					{
						id:3,
						name:"家居用品",
						in:"hang"
					},
					{
						id:4,
						name:"电工电气",
						in:"hang"
					},
					{
						id:5,
						name:"数码产品",
						in:"hang"
					},
					{
						id:6,
						name:"通信产品",
						in:"hang"
					},
					{
						id:0,
						name:"办公文教",
						in:"hang"
					},
				],
				hangIndex:null,
				selectedCondition:'',
				qbfl:"全部分类",
				khfl:"",//客户分类
				khlx:"",//客户类型
				khzt:"",//客户状态
				khxj:"",
				sshy:"",
				newArrs:[]
			}
		},
		methods: {
	
			hangGai(index,name){
				this.hangIndex=index
				this.sshy=name
			},
			chongs(){
				this.shai=false
				this.khfl=""
				this.khlx=""
				this.khzt=""
				this.khxj=""
				this.sshy=""
				this.zhu=true
			},
			pais(){
				this.pai=false
				this.khfl=""
				this.khlx=""
				this.khzt=""
				this.khxj=""
				this.sshy=""
				this.zhu=true
			},
			starGai(index,name){
				this.starIndex=index,
				this.khxj=name
			},
			typeGai(index,name){
				this.typeIndex=index
				this.khzt=name
				
			},
			leiGai(index,name){
				this.leiIndex=index
				this.khlx=name
			},
			onGai(index,name,on,ns){
				this.fenIndex=index
				this.khfl=name
			},
			suo(){
				this.shai=false,
				this.zhu=true
				if(this.fenIndex===0){
					this.newArr=this.arr.filter(item=>item.leiAll=="全部类型")
					if(this.leiIndex){
						this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.leiAll=="全部类型")
						if(this.typeIndex){
							this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.leiAll=="全部类型" && item.types==this.khzt)
							if(this.starIndex){
								this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.leiAll=="全部类型" && item.types==this.khzt && item.star==this.khxj)
								if(this.hangIndex){
									this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.leiAll=="全部类型" && item.types==this.khzt && item.star==this.khxj && item.hang==this.sshy)
								}
							}
						}
						if(this.starIndex){
							this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.leiAll=="全部类型" && item.star==this.khxj)
						}
						if(this.hangIndex){
							this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.leiAll=="全部类型" && item.hang==this.sshy)
						}
					}
					if(this.typeIndex){
						this.newArr=this.arr.filter(item=>item.leiAll=="全部类型" && item.types==this.khzt)
						if(this.starIndex){
							this.newArr=this.arr.filter(item=>item.leiAll=="全部类型" && item.types==this.khzt && item.star==this.khxj)
						}
						if(this.hangIndex){
							this.newArr=this.arr.filter(item=>item.leiAll=="全部类型" && item.types==this.khzt && item.hang==this.sshy)
						}
					}
					if(this.starIndex){
						this.newArr=this.arr.filter(item=>item.leiAll=="全部类型" && item.star==this.khxj)
						if(this.hangIndex){
							this.newArr=this.arr.filter(item=>item.leiAll=="全部类型" && item.star==this.khxj && item.hang==this.sshy)
						}
					}
					if(this.hangIndex){
						this.newArr=this.arr.filter(item=>item.leiAll=="全部类型" && item.hang==this.sshy)
					}
				}else if(this.fenIndex!==0 ){
					this.newArr=this.arr.filter(item=>item.khfl==this.khfl)
					if(this.leiIndex){
						this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl)
						if(this.typeIndex){
							this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl && item.types==this.khzt)
							if(this.starIndex){
								this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl && item.types==this.khzt && item.star==this.khxj)
								if(this.hangIndex){
									this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl && item.types==this.khzt && item.star==this.khxj && item.hang==this.sshy)
								}
							}
						}
						if(this.starIndex){
							this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl && item.star==this.khxj)
							if(this.hangIndex){
								this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl && item.hang==this.sshy && item.star==this.khxj)
							}
						}
						if(this.hangIndex){
							this.newArr=this.arr.filter(item=>item.lei==this.khlx && item.khfl==this.khfl && item.hang==this.sshy)
						}
					}
					if(this.typeIndex){
						this.newArr=this.arr.filter(item=>item.khfl==this.khfl && item.types==this.khzt)
						if(this.starIndex){
							this.newArr=this.arr.filter(item=>item.khfl==this.khfl && item.types==this.khzt && item.star==this.khxj)
						}
						if(this.hangIndex){
							this.newArr=this.arr.filter(item=>item.khfl==this.khfl && item.types==this.khzt && item.hang==this.sshy)
						}
					}
					if(this.starIndex){
						this.newArr=this.arr.filter(item=>item.khfl==this.khfl && item.star==this.khxj)
						if(this.hangIndex){
							this.newArr=this.arr.filter(item=>item.khfl==this.khfl && item.star==this.khxj && item.hang==this.sshy)
						}
					}
					if(this.hangIndex){
						this.newArr=this.arr.filter(item=>item.khfl==this.khfl && item.hang==this.sshy)
					}
				}
			},
			yesxv(){
				this.xvs=true
			},
			noxv(){
				this.xvs=false
			},
			ppp(index){
				this.paiINdex=index
			},
			gai(){
				this.act=1,
				this.pai=!this.pai,
				this.shai=false
				this.zhu=false
				if(this.pai==false){
					this.zhu=true
				}
			},
			gaier(){
				this.act=2,
				this.shai=!this.shai,
				this.pai=false,
				this.zhu=false
				if(this.shai===false){
					this.zhu=true
				}
			},
			go(item){
				uni.navigateTo({
				  url:
				    "/pages/crmDetail/crmDetail?item=" +
				    JSON.stringify(item),
				});
			},
			sortByPro(pro, flag) {
			  return (a, b) => {
				if(typeof a[pro] === 'string' && typeof b[pro]==='string'){
					return flag ? a[pro].localeCompare(b[pro]) : b[pro].localeCompare(a[pro])
				}else{
					return flag ? (a[pro] - b[pro]) : (b[pro] - a[pro])
				}
			  }
			},
			result(index){
				this.paiINdex=index
				if(this.paiINdex===0){
					this.arr=this.arr.slice().sort(this.sortByPro('userName',this.xvs))
				}else if(this.paiINdex===1){
					this.arr=this.arr.slice().sort(this.sortByPro('lei',this.xvs))
				}else if(this.paiINdex===2){
					this.arr=this.arr.slice().sort(this.sortByPro('types',this.xvs))
				}else if(this.paiINdex===3){
					this.arr=this.arr.slice().sort(this.sortByPro('hang',this.xvs))
				}else if(this.paiINdex===5){
					this.arr=this.arr.slice().sort(this.sortByPro('lei',this.xvs))
				}else if(this.paiINdex===6){
					this.arr=this.arr.slice().sort(this.sortByPro('star',this.xvs))
				}else if(this.paiINdex===7){
					this.arr=this.arr.slice().sort(this.sortByPro('laseTime',this.xvs))
				}else if(this.paiINdex===8){
					this.arr=this.arr.slice().sort(this.sortByPro('id',this.xvs)) 
				}else if(this.paiINdex===9){
					this.arr=this.arr.slice().sort(this.sortByPro('price',this.xvs))
				}else if(this.paiINdex===10){
					this.arr=this.arr.slice().sort(this.sortByPro('id',this.xvs))
				}
			},
			queding(){
				this.pai=false,
				this.zhu=true
			},	
	
	
		},
		components:{
			Top
		},
		computed:{
			
		},  
		created() {
		  uni.request({
		    url: "http://127.0.0.1:3000/kehu/getAll", //接口地址
		    method: "POST",
		    success: (res) => {
		      this.arr = res.data.data;
		    },
		  });  
		},
	}
</script>

<style lang="scss">
.LNCus{
	background-color: #f9f9f9;
	.CusTop{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		.CusShai{
			display: flex;
			border-bottom: 1px solid #eee;
			background-color: white;
			.pppLN{
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
			.sssLN{
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
			.active{
				color: #0d7bfe;
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
	.LNCon{
		margin-top: 250rpx;
		.ULCon{
			padding: 40rpx 20rpx;
			.LICon{
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 20rpx;
				box-shadow: 1px 1px 5px #ccc;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				color: gray;
				.LNleft{
					.zuoTitle{
						margin-bottom: 30rpx;
						font-weight: 700;
						font-size: 30rpx;
					}
					.last{
						margin-bottom: 20rpx;
						font-size: 25rpx;
					}
					.star{
						font-size: 25rpx;
					}
					.disan{
						display: flex;
						font-size: 25rpx;
						justify-content: space-between;
						// padding: 0 20rpx;
						box-sizing: border-box;
						margin-top: 20rpx;
					}
				}
				.LNRight{
					display: flex;
					flex-direction: column;
					align-items: center;
					.rightON{
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						.yuan{
							width: 10rpx;
							height: 10rpx;
							background-color: #0d7bfe;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						.zheng{
							font-size: 25rpx;
						}
					}
					.tou{
						width: 50rpx;
						height: 50rpx;
					}
					.userName{
						font-size: 28rpx;
						margin-top: 10rpx;
					}
					.geng{
						margin-top: 20rpx;
						font-size: 25rpx;
					}
				}
			}
		}
		.paiPage{
			background-color: white;
			padding: 40rpx;
			box-sizing: border-box;
			color: gray;
		
			width: 100%;
			border-top: 1px solid #ccc;
			overflow-y: auto;
			.pai{
				font-weight: 700;
				margin-bottom: 20rpx;
			}
			.uPai{
				margin-bottom: 20rpx;
				.liPai{
					border: 1px solid #eee;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
					color: black;
				}
				.ac{
					border: 1px solid #eee;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
					color: #0d7bfe;
					
				}
			}
			.LNbottom{
				width: 100%;
				display: flex;
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 0 40rpx;
				.chong{
					width: 50%;
					background-color: white;
					color: #0d7bfe;
					border: 2rpx solid #ccc;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}
				.que{
					width: 50%;
					height: 100rpx;
					text-align: center;
					background-color: #0d7bfe;
					color: white;
					line-height: 100rpx;
				}
			}
			.pais{
				height: 50rpx;
				width: 100%;
			}
		}
		.shaiPage{
			background-color: white;
			padding: 40rpx;
			box-sizing: border-box;
			color: gray;
			width: 100%;
			padding-bottom: 100rpx;
			
			border-top: 1px solid #ccc;
			overflow-y: auto;
			.LNbottom{
				width: 100%;
				display: flex;
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 0 40rpx;
				.chong{
					width: 50%;
					background-color: white;
					color: #0d7bfe;
					border: 2rpx solid #ccc;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}
				.que{
					width: 50%;
					height: 100rpx;
					text-align: center;
					background-color: #0d7bfe;
					color: white;
					line-height: 100rpx;
				}
			}
			.keFen{
				height: 60rpx;
				display: flex;
				align-items: center;
				font-weight: 700;
				box-sizing: border-box;
				color: gray;
				padding-left: 10rpx;
			}
			.onFen{
				display: flex;
				flex-wrap: wrap;
			
				margin-top: 20rpx;
				.onLI{
					width: 30%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #eee;
					margin-bottom: 30rpx;
					font-size: 25rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
				}
				.onActive{
					width: 30%;
					height: 80rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #60c6f5;
					margin-bottom: 30rpx;
					font-size: 25rpx;
					background-color: #f8fbff;
					color: #60c6f5;
					
				}
			}
		}
	}
}
</style>
